<template>
  <div class="usercenter">
    <div class="header">
      <div class="header_title">
        <div class="title_avatar">
          <img :src="business.avatar_text" />
        </div>
        <div class="title_content">
          <div class="content_text">{{business.nickname}}</div>
          <div class="content_sm">{{business.date}}</div>
        </div>
      </div>
    </div>
    <div class="userorder">
      <div class="order_project">
        <div class="item">
          <router-link to="/sale" class="item">
            <div class="img"> <img src="/assets/images/retail1.png" alt=""></div>
            分销信息
          </router-link>
        </div>
        <div class="item">
          <router-link to="/sale/business" class="item">
            <div class="img"> <img src="/assets/images/retail2.png" alt=""></div>
            分销会员
          </router-link>
        </div>
        <div class="item">
          <router-link to="/sale/money" class="item">
            <div class="img"> <img src="/assets/images/retail3.png" alt=""></div>
            分销佣金
          </router-link>
        </div>
        <div class="item">
          <router-link to="/business/coupon" class="item">
            <div class="img"> <img src="/assets/images/coupon.png" alt=""></div>
            优惠列表
          </router-link>
        </div>
        <div class="item solid-left">
          <router-link to="/business/pay" class="item">
            <div class="img"> <img src="/assets/images/recharge2.png" alt=""></div>
            充值中心
          </router-link>
        </div>
      </div>
    </div>
    <div class="usertool">
      <div class="list">
        <div class="item">
          <router-link to="/business/profile">
            <div class="img">
              <img src="/assets/images/profile.png" alt="">
            </div>
            基本资料
          </router-link>
        </div>
        <div class="item">
          <router-link to="/business/email">
            <div class="img"> <img src="/assets/images/email.png" alt=""></div>
            邮箱认证
          </router-link>
        </div>
        <div class="item">
          <router-link to="/address">
            <div class="img"> <img src="/assets/images/address.png" alt=""></div>
            收货地址
          </router-link>
        </div>
        <div class="item">
          <router-link to="/business/record">
            <div class="img">
              <img src="/assets/images/consume.png" alt="">
            </div>
            消费记录
          </router-link>
        </div>
        <div class="item">
          <router-link to="/order">
            <div class="img">
              <img src="/assets/images/recharge2.png" alt="">
            </div>
            我的订单
          </router-link>
        </div>
        <div class="item">
          <a href="javascript:void(0)" @click="logout">
            <div class="img">
              <img src="/assets/images/returns.png" alt="">
            </div>
            退出登录
          </a>
        </div>
      </div>
    </div>
    <div class="userorder">
      <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="refresh">
      <!-- 加载列表 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :offset="10"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="load"
      >
      <ul class="proul">
          <li v-for="product in list" :key="product.id">
            <router-link :to="`/product/info?id=${product.id}`">
              <van-image
                width="100%"
                height="auto"
                fit="cover"
                :src="product.thumbs_text"
              />
            </router-link>

            <router-link :to="`/product/info?id=${product.id}`">
              <p class="tit">{{product.name}}</p>
            </router-link>
            <div class="price">
              <p>￥{{product.price}} / {{product.unit_text}}</p>
            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>

    <!-- 返回顶部 -->
    <van-back-top />
      
    </div>
    
    <Tabbar />
  </div>
</template>

<script setup>
import { onBeforeMount } from "vue"


  //获取this对象
  const {proxy} = getCurrentInstance()

  const business = proxy.$business

  let logout = () => 
  {
    showConfirmDialog({
        message: '是否确认退出',
    }).then(() => { //确认
        proxy.$store.$reset()
        localStorage.removeItem('token')
        //退出到登录界面
        proxy.$router.push('/business/login')
        return
    }).catch(() => {})
  }
  onBeforeMount(()=>refresh())
  let list = ref([]) //数据列表
  let page = ref(1)  //分页
  let loading = ref(false) //加载状态
  let finished = ref(false) //是否无更多数据
  let refreshing = ref(false) //下拉刷新
  //下拉刷新
  const refresh = async () =>
  {
      page.value = 1
      list.value = []
      finished.value = false
      loading.value = true
      load()
  }

  //加载数据方法
  const load = async () =>
  {
    let result = await proxy.$GET({
      url:'/business/collection',
      params:{
        pageSize:6,
        page:page.value,
      }
    })
    if(result)
    {
      list.value = list.value.concat(result.data)
      refreshing.value = false
      loading.value = false
      finished.value = !result.has_more
      if(result.has_more)  page.value++
    }
  }
</script>

<style scoped>
  @import url('/assets/css/BusinessIndex.css');
  @import url('/assets/css/ProductIndex.css');
</style>